<template>
  <div class="item-box">
    <div ref="myecharts" id="echart"></div>
  </div>
</template>
  <script>
export default {
  props: ["echartData",'etitle'],
  data() {
    return {
      myChart: null,
    };
  },
  // 页面初始化挂载dom
  mounted() {
    this.$nextTick(() => {
      this.getLoadEcharts();
    });
  },
  methods: {
    title: {
    text: this.etitle,
    subtext: 'Fake Data',
    left: 'center'
  },
    getLoadEcharts() {
      this.myChart = this.$echarts.init(this.$refs.myecharts);
      var colorList = ["#5470c6", "#91cc75", "#fac858", "#ee6666"];
      let option = {
        title:{
            text:'CPU使用率',
            bottom:0,
            left:30,
            textStyle:{
                fontSize:14,
                color:'#000'
            }
        },
        series: [
          {
            name: "1",
            type: "gauge",
            center: ["50%", "55%"], // 默认全局居中
            radius: "100%",
            min: 0,
            max: 400,
            splitNumber: 10,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  [70 / 100, "#0871e8"], //根据实际数据动态改变
                  [1, "#e5e9f2"],
                ],
                width: 8, //半径
                shadowColor: "#fff", //默认透明
                shadowBlur: 1,
              },
            },
            pointer: {
              show: false,
            },
            axisLabel: {
              show: true,
              // 坐标轴小标记
              textStyle: {
                // 属性lineStyle控制线条样式
                fontWeight: "bolder",
                color: "transparent", //刻度数字颜色 隐藏
                shadowColor: "#fff", //默认透明
                shadowBlur: 10,
              },
            },
            axisTick: {
              // 坐标轴小标记
              length: 11, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "transparent", //坐标轴 小刻度线颜色
                shadowColor: "#fff", //默认透明
                shadowBlur: 10,
              },
            },
            splitLine: {
              // 分隔线
              length: 20, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 3,
                color: "transparent", //分割线
                shadowColor: "#fff", //默认透明
                shadowBlur: 10,
              },
            },
            // title: {
            //     show:true,
                
            //   textStyle: {
            //     // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            //     fontWeight: "bolder",
            //     fontStyle: "italic",
            //     color: "#000",
            //     shadowColor: "red", //默认透明
            //     shadowBlur: 10,
            //   },
            // },
            detail: {
              //show : true ,
              borderColor: "#fff",
              shadowColor: "#fff", //默认透明

              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: "bolder",
                fontSize: 16,

                color: "#000",
              },
              formatter: "{value}%",
              offsetCenter: ["0", "5%"],
            },
            data: [{ value: 70, name: "" }],
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
};
</script>
  <style scoped lang="less">
.item-box {
  height: 130px;
  width: 140px;
}
#echart {
  width: 100%;
  height: 100%;
}
</style>
  